<template>
  <view>
    <view class="express" v-if="!wx_check">
      <!-- swiper -->
      <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item
            v-for="(item, index) in image"
            :key="index"
            class="swpier-item"
        >
          <view class="image" @click="clickSwiper(item)">
            <u--image width="100%" height="100%" :fade="true" duration="450" lazy-load mode="widthFix" :src="baseUrl + item.image.path" v-if="item.image"></u--image>
          </view>
        </swiper-item>
      </swiper>
      <!-- title -->
      <!--<view class="title" v-if="image && image.name">-->
      <!--  <view class="line"></view>-->
      <!--  <view class="text">{{image.name}}</view>-->
      <!--  <view class="line"></view>-->
      <!--</view>-->
      <!-- nav -->
      <view class="nav">
        <view class="left">
          <u--image @click="handleAd(ad[0])" width="345rpx" :fade="true" duration="450" lazy-load mode="widthFix" :src="baseUrl + ad[0].image.path" v-if="ad[0] && ad[0].image"></u--image>
        </view>
        <view class="top">
          <u--image @click="handleAd(ad[1])" height="108rpx" :fade="true" duration="450" lazy-load mode="heightFix" :src="baseUrl + ad[1].image.path" v-if="ad[1] && ad[2].image"></u--image>
        </view>
        <view class="bottom">
          <u--image @click="handleAd(ad[2])" height="108rpx" :fade="true" duration="450" lazy-load mode="heightFix" :src="baseUrl + ad[2].image.path" v-if="ad[2] && ad[2].image"></u--image>
        </view>
      </view>
      <!-- qrcode -->
      <view class="qrcode">
        <u--image @click="handleAd(ad[3])" width="100%" :fade="true" duration="450" lazy-load mode="widthFix" :src="baseUrl + ad[3].image.path" v-if="ad[3] && ad[2].image"></u--image>
      </view>
      <!-- list -->
      <view class="list" v-if="list.length > 0">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="left">
            <view class="image" v-if="item.image">
              <u--image shape="circle" width="50rpx" height="50rpx" lazy-load :fade="true" duration="450" :src="baseUrl + item.image.path"></u--image>
            </view>
            <view class="name">{{item.name}}</view>
          </view>
          <view class="right">
            <view class="old" v-if="item.old_price > 0">{{item.old_price}}元</view>
            <view class="price">
              <text class="color">{{item.price}}元起</text>
              <text>/单</text>
            </view>
          </view>
        </view>
      </view>
      <!-- btn -->
      <view class="btn" @click="goExpress">
        立即寄件
      </view>
      <u-toast ref="uToast"></u-toast>
      <v-tab :selected="'/pages/express/index'" />
    </view>
    <view class="wrapper" v-else>
      <list :list="list_product" />
      <v-tab :selected="'/pages/express/index'" />
    </view>
  </view>
</template>

<script>
import config from '../../config/config'
import base64 from '../../util/base64'
import Express from '../../api/express'
import Tab from '../../components/tab'
import color from '@/config/color.js'
const expressModel = new Express()

// 全部商品
import List from '../../components/list/index'
import Product from '../../api/product'
const productModel = new Product()

export default {
  components: {
    'v-tab': Tab,
    List
  },
  data() {
    return {
      image: '',
      list: [],
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      ad: [],
      // 微信审核
      wx_check: true,
      // 全部商品
      list_product: []
    }
  },
  onLoad() {
    // 分享
    /*#ifdef MP-WEIXIN*/
    // 微信小程序端执行的逻辑
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'],
      success: res => {

      }
    })
    /*#endif*/
  },
  onShow() {
    this.getAllProduct()
    uni.hideTabBar({
      animation: false,
      success: () => {

      },
      fail: () => {

      }
    })
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    this.fetch()
    this.fetchAd()
  },
  onPullDownRefresh() {
    this.fetch()
  },
  methods: {
    // 轮播图点击
    clickSwiper(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    // 获取数据
    fetch() {
      expressModel.getUni().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.image = data.image
        this.list = data.list
        this.wx_check = data.wx
        console.log(data.list)
        this.list.forEach(x => {
          this.$set(x, 'old_price', +x.old_price)
          this.$set(x, 'price', +x.price)
        })
        // console.log(data)
      }).finally(() => {
        uni.stopPullDownRefresh();
      })
    },
    //ad
    fetchAd() {
      expressModel.getUniAd().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.ad = data.list
        // console.log(data)
      })
    },
    // 到下单页面
    goExpress() {
      // this.$refs.uToast.show({
      //   message: '请稍后再试~'
      // })
      uni.navigateTo({
        url: '/pages/express/order'
      })
    },
    handleAd(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    // 全部商品(只显示1页)
    getAllProduct() {
      productModel.productList({
      }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list_product = data.list
        // console.log(this.list_product)
      })
    }
  }
}
</script>

<style scoped lang="scss">

// 按钮高度
$btn_height: 25px;

.wrapper {
  padding: 20rpx;
  background: #f3f5f7;
  min-height: 100vh;
}

.express {
  background: #f4f4f4;
  font-size: 24rpx;
  padding-bottom: 120px;
  padding-top: 20rpx;
}

//.express .title {
//  display: flex;
//  align-items: center;
//  justify-content: center;
//  height: 60px;
//  color: #e99731;
//  .text {
//    margin: 0 10px;
//    font-size: 28rpx;
//    //font-weight: 700;
//    letter-spacing: 5rpx;
//  }
//  .line {
//    height: 1px;
//    background: #e99731;
//    width: 10%;
//  }
//}
.swiper {
  margin: 0 20rpx;
  height: 245rpx !important;
}
.swpier-item {
  height: 245rpx !important;
  border-radius: 10rpx;
  .image {
    border-radius: 10rpx;
  }
}
.list {
  //min-height: 1000px;
  //background: white;
  margin: 10px 5px;
  padding: 0 5px;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin-bottom: 2rpx;
    background: white;
    padding: 0 15px;
    .left, .right {
      display: flex;
      align-items: center;
    }
    .image {
      margin-right: 10px;
    }
    .name {
      //font-weight: 700;
      font-size: 30rpx;
      letter-spacing: 2rpx;
    }
    .old {
      color: #c5c5c5;
      font-size: 28rpx;
      text-decoration: line-through;
    }
    .price {
      margin-left: 10px;
      font-size: 30rpx;
      letter-spacing: 3rpx;
      .color {
        color: red;
      }
    }
  }
}
.btn {
  position: fixed;
  z-index: 10;
  left: 10px;
  right: 10px;
  height: $btn_height;
  line-height: $btn_height;
  bottom: 70px;
  background: #fe9112;
  padding: 10px;
  border-radius: 10rpx;
  text-align: center;
  color: white;
  font-size: 30rpx;
  letter-spacing: 4rpx;
}
.nav {
  margin: 20rpx;
  background: white;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  view {
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .left {
    grid-row: 1 / 3;
    //.image {
    //  position: absolute;
    //  display: block;
    //  max-width: 100%;
    //  max-height: 100%;
    //  top: 50%;
    //  left: 50%;
    //  transition: translate(-50%, -50%);
    //}
  }
}
.qrcode {
  margin: 20rpx;
  height: 96rpx;
  overflow: hidden;
}
</style>
